<script setup>
import { onMounted, reactive, ref } from 'vue'
// import diit2DMap from '@diit/map'
import axios from 'axios'

const mapData = './static/config/config.json'

const diit2DMap = window.diit2DMap

const myMap = reactive({
  mapInstance: {},
  mapConfig: {},
})
const baseMapPanelData = ref({})

const isInit = ref(false)

// 添加底图
const addBaseMap = function (mapInstance) {
  baseMapPanelData.value = {
    domId: 'map-baseMap',
    basemaps: mapInstance.dataConfig.defaultMap.basemaps,
    topmaps: mapInstance.dataConfig.defaultMap.topmaps,
    options: {
      isShowBlankMap: true,
    },
  }
  // 添加底图
  const basemaps = mapInstance.dataConfig.defaultMap.basemaps
  if (basemaps) {
    basemaps.forEach((item) => {
      if (item.options.visible === true) {
        const layer = mapInstance.layerManager.createLayer(
          item.id,
          item.type,
          item.url,
          item.options
        )
        mapInstance.addBaseMapLayer(layer)
      }
    })
  }
  // 添加顶图
  const topmaps = mapInstance.dataConfig.defaultMap.topmaps
  if (topmaps) {
    topmaps.forEach((item) => {
      if (item.options.visible === true) {
        const layer = mapInstance.layerManager.createLayer(
          item.id,
          item.type,
          item.url,
          item.options
        )
        mapInstance.addTopLayer(layer)
      }
    })
  }
  isInit.value = true
}

const initMap = function () {
  const mapInstance = new diit2DMap.Map('diitmap', {})
  mapInstance.eventManager.subscribe(
    mapInstance.eventManager.enumEventType.Map.MapInitCompltedEvent,
    () => addBaseMap(mapInstance)
  )

  axios.get(mapData).then((res) => {
    myMap.mapConfig = res.data
    mapInstance.init(res.data)
  })
  myMap.mapInstance = mapInstance
}

onMounted(() => {
  initMap()
})

const test = ref('')

const change = () => {
  console.log(test.value)
}
</script>

<template>
  <div class="map-warp">
    <!-- <a-input
      v-model="test"
      @change="change"
    /> -->
    <div id="diitmap" class="map" />

    <d-config-provider :my-map="myMap.mapInstance">
      <d-tool-bar top="24" right="24">
        <d-zoom-in />
        <d-zoom-out />
      </d-tool-bar>

      <d-tool-bar direction="vertical" bottom="64" right="24">
        <d-zoom-in />
        <d-zoom-out />
        <d-pan-view />
        <d-prev-view />
        <d-next-view />
      </d-tool-bar>
      <d-current-space-info />
      <d-base-map-panel :basemap-option="baseMapPanelData" />
    </d-config-provider>
  </div>
</template>

<style scoped>
.map {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.map-warp {
  position: relative;
}
</style>
